<!-- 审核中图片 -->
<script setup lang="ts">
import { fetchVerifyPhotosAPI } from '@/apis/fetchVerifyPhotos'
import router from '@/router'
import { useUserInfoStore } from '@/store/userInfo'

const userInfoStore = useUserInfoStore()

// 班级 id
const classId = ref('')

// 审核中的图片的列表数据
const list = ref<PhotoWithClassID[]>([])
// 是否处于加载中状态
const loading = ref(false)

const videoCovers = computed(() => {
  const covers: string[] = []
  list.value.forEach((el) => {
    if (el.type.toString() === '2')
      covers.push(el.cover)
  })
  return covers
})

onLoad(async (options) => {
  if (options && options.class_id) {
    classId.value = options.class_id
    loadPhotos(classId.value)
  }
  else {
    uni.showToast({ title: '获取数据失败：没有班级id', icon: 'none' })
  }
})

onShow(() => loadPhotos(classId.value))

/**
 * @description 不分页，一次性加载所有数据
 *
 * @param class_id - 班级 id，从路由参数中获取到以后传入这里
 */
async function loadPhotos(class_id: string) {
  try {
    loading.value = true

    const res = await fetchVerifyPhotosAPI({
      id: class_id,
      page: '1',
      limit: '10000',
    }, userInfoStore.userInfo!.token!)

    if (res.data?.code === 1)
      list.value = res.data.data.data
    else
      uni.showToast({ title: res.data?.msg })

    loading.value = false
  }
  catch (err) {
    uni.showToast({ title: JSON.stringify(err), icon: 'none' })
  }
}

/**
 * @description 点击“上传照片”按钮时触发，跳转至上传页面
 */
function handleUpload() {
  router.push({
    name: 'uploadPhotos',
    params: { class_id: classId.value },
  })
}
</script>

<template>
  <view class="min-h-screen bg-#F8FAFE">
    <view v-if="list.length > 0" class="bg-white px-25rpx py-48rpx">
      <view class="flex items-center">
        <image class="h-32rpx w-32rpx" src="@/static/images/verify.png" />
        <Spacer width="12" />
        <view class="text-28rpx text-#0037AE leading-40rpx">
          审核中照片
        </view>
      </view>
      <Spacer height="32" />
      <PictureGrid
        mode="display"
        :width="700"
        :cols="4"
        :medium="list.map(el => withDomain(el.image)!)"
        :video-covers="videoCovers.map(el => withDomain(el)!)"
      />
    </view>
    <!-- 上传照片按钮 START -->
    <view class="fixed bottom-0 z-10 h-168rpx w-750rpx flex items-center justify-center bg-white pb-48rpx x-center">
      <button
        class="h-100rpx w-650rpx flex items-center justify-center rounded-full bg-#0037AE text-30rpx text-white font-medium leading-42rpx"
        hover-class="bg-#3266D9"
        @tap="handleUpload"
      >
        上传照片
      </button>
    </view>
    <!-- 上传照片按钮 END -->
  </view>

  <PageDefault v-if="list.length === 0">
    暂无待审核照片
  </PageDefault>
  <uv-loading-page :loading="loading" loading-text="加载中..." font-size="28rpx" loading-mode="spinner" />
</template>

<route lang="yaml">
name: 'verifyPhotos'
style:
  navigationBarTitleText: '上传相册'
layout: 'custom'
</route>
